<template>
  <div class="container">
    <VerticalLayout :isSearchCollapsed="isSearchCollapsed">
      <template #filters>
        <!-- 财务 -->
        <FilterForm role="finance" @change="filterChange" />
      </template>

      <template #header>
        <el-alert type="warning" class="mb-10" :closable="false">
          <template #title>
            查询范围覆盖所有复购单，但核销仅限已签收订单。财务可查看每笔订单的定金情况，包括延期发货订单
          </template>
        </el-alert>
      </template>

      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="flex-start">
          <el-switch
            v-model="isSearchCollapsed"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inline-prompt
            active-text="展开"
            inactive-text="收起"
          ></el-switch>

          <DynamicQueryForm
            :show-match-range="true"
            :extra-fields="extraField"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="listRepeatPurchaseOrder"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left> </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <template #table-top> </template>

          <!-- 订单信息 -->
          <template #orderSlot="{ row }">
            <RowSlots slotName="repeatOrderSlot" :row="row" />
          </template>

          <!-- 收货人信息 -->
          <template #logisticsSlot="{ row }">
            <RowSlots slotName="repeatLogisticsSlot" @payHistory="payHistory" :row="row" />
          </template>

          <!-- 业务员信息 -->
          <template #salesmanSlot="{ row }">
            <RowSlots slotName="salesmanSlot" :row="row" />
          </template>

          <!-- 物流追踪 -->
          <template #logisticsStatusSlot="{ row }">
            <RowSlots slotName="logisticsStatusSlot" :row="row" />
          </template>

          <!-- 类别 -->
          <template #categorySlot="{ row }">
            <RowSlots slotName="categorySlot" :row="row" />
          </template>

          <!-- 下单/签收时间 -->
          <template #orderTimerSlot="{ row }">
            <RowSlots slotName="orderTimerSlot" :row="row" />
          </template>

          <template #dosageSlot="{ row }">
            <RowSlots slotName="repeatDosageSlot" :goodsTypes="goodsTypes" :row="row" />
          </template>

          <template #awardSlot="{ row }">
            <div class="award-info">
              <div class="award-header">
                <span>{{ row.award || 0 }}</span>
              </div>
            </div>
          </template>

          <!-- 订单金额 -->
          <template #orderAmountSlot="{ row }">
            <div class="order-amount">
              <div class="order-amount-header">
                <span>总金额：</span>
                <span>{{ row.orderAmount || 0 }}</span>
              </div>
              <div class="order-amount-header">
                <span>已收金额：</span>
                <span>{{ row.paidAmount || 0 }}</span>
              </div>
              <div class="order-amount-header">
                <span>代收金额：</span>
                <span>{{ row.unpaidAmount || 0 }}</span>
              </div>
            </div>
          </template>

          <!-- 付款方式 -->
          <template #paymentMethodSlot="{ row }">
            <div class="payment-method">
              <div class="payment-method-header">
                <span>{{ getPayName(row.paymentMethod) }}</span>
              </div>
            </div>
          </template>

          <!-- 是否到账 -->
          <template #isArrivedSlot="{ row }">
            <div class="is-arrived">
              <div class="is-arrived-header">
                <span>{{ row.isArrived }}</span>
              </div>
            </div>
          </template>

          <!-- 核销状态 -->
          <template #writeOffStatusSlot="{ row }">
            <div class="write-off-status">
              <div class="write-off-status-header">
                <!-- 0 否 1 是 -->
                <el-tag size="small" v-if="row.isWriteOff === 0" type="danger" effect="dark"
                  >未核销</el-tag
                >
                <el-tag v-else type="success" effect="dark">已核销</el-tag>
              </div>
            </div>
          </template>

          <!-- 备注 -->
          <template #remarkSlot="{ row }">
            <RowSlots
              :row="row"
              slotName="remarkSlot"
              @showCustomerFollowUp="showCustomerFollowUp"
            />
          </template>

          <!-- 操作 -->
          <template #operationSlot="{ row }">
            <!-- 订单已完成 并且 未核销 -->
            <el-space
              v-if="row.isWriteOff === 0"
              size="small"
              direction="vertical"
              alignment="normal"
            >
              <el-button
                size="small"
                v-if="!row.isMultiPackage"
                link
                type="primary"
                @click="showReversal(row)"
                >核销</el-button
              >
              <el-button v-else size="small" link type="primary" @click="showRepurchaseMulti(row)"
                >核销(多包裹)</el-button
              >
              <!--  -->
            </el-space>
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>
    <!-- 复购单审核 单订单 -->
    <ReversalPurchaseRecord
      :goodsList="goodsList"
      :goodsTypes="goodsTypes"
      @ok="customTableRef?.refresh"
      ref="reversalPurchaseRecordRef"
    />
    <!-- 复购单审核 多包裹 -->
    <RepurchaseVerificationMulti
      :goodsList="goodsList"
      :goodsTypes="goodsTypes"
      @ok="customTableRef?.refresh"
      ref="repurchaseVerificationMultiRef"
    />
    <!-- 用户下单记录 -->
    <CustomerOrderHistory ref="customerOrderHistoryRef" />
  </div>
</template>

<script setup lang="ts">
import { columns } from './columns';
import { listRepeatPurchaseOrder } from '../../../api/platformOrders/orders/repeatPurchaseOrder';
import { extraField, columnsValues } from './searchOptions';
import { useDict } from '../../../utils/dict';
import { useGoods } from '../../../hooks/useGoods';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useCustomStore } from '../../../store/modules/custom';
import { useFilterSearch } from '../../../hooks/useFilterSearch';
const customStore = useCustomStore();

const isSearchCollapsed = ref(false);
// table
const customTableRef = ref();
// 跟进详情
const customerFollowUpRef = ref();
// 用户下单记录
const customerOrderHistoryRef = ref();
// 核销
const reversalPurchaseRecordRef = ref();
// 多包裹
const repurchaseVerificationMultiRef = ref();
// 基础商品列表
const { goodsList } = useGoods();
// 统一管理search
const { filterChange, onSubmit } = useFilterSearch(customTableRef);

// 字典集合
const {
  sys_pay_type: payType, // 支付类型
  sys_goods_type: goodsTypes // 商品类型
} = useDict('sys_pay_type', 'sys_goods_type');

// 选中项
const selections = ref<any>([]);
const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};

// 获取付款方式
const getPayName = (paymentMethod: number) => {
  return payType.value.find((v: any) => v.value == paymentMethod)?.label;
};

// 单订单核销
const showReversal = (row: any) => {
  reversalPurchaseRecordRef.value?.show(row);
};

// 查看订单记录
const payHistory = (row: any) => {
  customerOrderHistoryRef.value?.show(row);
};

// 显示跟踪备注
const showCustomerFollowUp = (row: any, typeCode: number) => {
  customerFollowUpRef.value?.show(row, typeCode);
};
// 多包裹核销
const showRepurchaseMulti = (row: any) => {
  repurchaseVerificationMultiRef.value?.show(row);
};

onMounted(() => {
  // 初始化类别数据
  customStore.initCustom();
});
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
